<template>
    <view
        class="banner h-[200rpx] mx-[20rpx] mt-[20rpx] translate-y-0"
        v-if="content.data.length && content.enabled"
    >
        <swiper
            class="swiper h-full"
            :indicator-dots="content.data.length > 1"
            indicator-active-color="#4173ff"
            :autoplay="true"
        >
            <swiper-item
                v-for="(item, index) in content.data"
                :key="index"
                @click="handleClick(item.limk)"
            >
                <u-image
                    mode="aspectFit"
                    width="100%"
                    height="100%"
                    :src="getImageUrl(item.image)"
                    :border-radius="14"
                />
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
import { mapState } from 'vuex';
import {navigateTo} from '@/utils/util'
export default {
  props: {
    content: {
      type: Object,
      default() {
        return {};
      }
    },
    styles: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  computed: {
    ...mapState(['config']),
  },
  methods: {
    handleClick(link) {
      navigateTo(link);
    },
    getImageUrl(url) {
      return url ? (this.config.domain + url) : ''
    },
  }
};
</script>

<style></style>
